<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</head>

	<body>
		<div class="header">
			<div style="height:100%;width:100%;" id="slider" class="mui-slider">
					<div class="mui-slider-group  mui-slider-loop">
						<!--重复轮播-->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<img src="img/background.png" />
						</div>
						<!--第一个内容区容器-->
						<div class="mui-slider-item">
							<img src="img/background.png" />
						</div>

						<!--第二个内容区-->
						<div class="mui-slider-item">
							<img src="img/background.png" />
						</div>

						<!--重复轮播-->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<img src="img/background.png" />
						</div>
					</div>

					<!--轮播小圆点，需跟随轮播图数量-->
					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
					</div>
				</div>
		</div>
		
		<!--<div class="search">
				<button>模糊搜索</button>
			</div>-->
		
		<div class="options">
			<div class="list">
				<div class="image" >
					<img src="img/writing.png" />
				</div>
				<div>录入数据</div>
			</div>
			<div class="list">
				<div class="image">
					<img src="img/update.png" />
				</div>
				<div>更新进度</div>
			</div>
			<div class="list">
				<div class="image">
					<img src="img/history.png" />
				</div>
				<div>销售记录</div>
			</div>
			<div class="list">
				<div class="image">
					<img src="img/order.png" />
				</div>
				<div>客户列表</div>
			</div>
			<div class="list">
				<div class="image">
					<img src="img/release.png" />
				</div>
				<div>查看任务</div>
			</div>
			<div class="list">
				<div class="image">	
					<img src="img/public.png" />
				</div>
				<div>公号查看</div>
			</div>
			<div class="list" style="position: relative;">
				<div class="image">
					<img src="img/progress.png" />
				</div>
				<div>进度通知</div>
				<div class="red_spot" >
				</div>
			</div>
			
			
			<div class="list" >
				<div class="image">
					<img src="img/password.png" />
				</div>
				<div>密码修改</div>
			</div>
			<div class="list" >
				<div class="image">
					<img src="img/logout.png" />
				</div>
				<div>退出账号</div>
			</div>
		</div>
	</body>
	
	<div class="bottom">
			<div class="">
				<img src="img/home2.png" />
				<div class="active">
					首页
				</div>
			</div>
			<div class="">
				<img src="img/search.png" />
				<div class="">
					搜索
				</div>
			</div>
			<div class="">
				<img src="img/mine.png" />
				<div class="">
					个人中心
				</div>
			</div>
		</div>
	
	<script type="text/javascript">
		var rollSlider = mui("#slider");
		//每个1s中，播放一张图
		rollSlider.slider({
			interval: 1500
		});
	</script>
	<style type="text/css">
		body {
			background: white;
		}
		
		.user{
			padding:10px;
			display: flex;
		}
		
		.user div{
			flex:1;
			text-align: center;
		}		
		.header {
			width: 100%;
			height:50vw;
			background-image: url(img/background.png);
			background-size: 100% 100%;
			color: white;
			font-weight: 900;
			position: relative;
		}
		
		.header .title {
			text-align: center;
			padding: 10px;
		}
		
		.header .info {
			text-align: center;
			padding:0 30px;
		}
		
		.header .info img {
			width: 60px;
			height: 60px;
			border-radius: 100px;
			border: 3px solid #FFF8DC;
		}
		
		.header .info .name {
			font-size: 1.1em;
			padding: 10px;
			/*flex: 1;*/
		}
		
		.header .info .position {
			background: white;
			color: orange;
			border-radius: 100px;
			padding:2px 10px;
			font-size: 0.8em;
		}
		
		.white_block{
			position: absolute;
			bottom:-10vw;
			left:10vw;
			background:white;
			width:90vw;
			height:15vw;
			border-radius: 20px;
			text-align: cener;
		}
		
		.white_block .name{
			text-align: center;
			color:black;
			
			font-size: 1.1em;
			padding:5px;
		}
		
		.white_block .post{
			display:block;
			text-align: center;
		}
		.white_block .position{
			background: orange;
			color: color:white;
			border-radius: 100px;
			padding:2px 10px;
			font-size: 0.8em;
		}
		
		.options{
			/*padding-top:10vw;*/
		}
		
		.options .list {
			height: 25vw;
			width: 22%;
			background: white;
			text-align: center;
			float: left;
			margin-left: 2.5%;
			margin-top: 2.5vw;
			font-size: 0.8rem;
		}
		
		.options .list .image {
			width: 70%;
			height: 63%;
			/*border-radius: 100px;*/
			margin-top: 15%;
			margin-left: 15%;
			margin-bottom: 5px;
		}
		
		.options .list .image img{
			/*padding-top:20%;*/
			width:100%;
			height:100%;
		}
		
		.red_spot{
			width:10px;
			height:10px;
			border-radius: 10px;
			position:absolute;
			top:10px;
			right:10px;
			background: red;
		}
		
		.search {
			text-align: center;
			padding: 15px 0 10px;
		}
		
		.search button {
			width: 60%;
			height: 50px;
			background: deepskyblue;
			color: white;
			font-size: 1.2em;
			border: 0;
		}
		
		.bottom {
			position: fixed;
			bottom: 0;
			width: 100%;
			height:50px;
			display: flex;
			background: white;
			padding: 5px;
			font-size: 0.7em;
			border-top: 1px solid lightgrey;
			padding-top:8px;
		}
		
		.bottom div {
			flex: 1;
			text-align: center;
			background: white;
			position: relative;
			top:-5px;
		}
		
		.bottom div img {
			width: 25px;
			height: 25px;
			text-align: center;
		}
		
		.active {
			color: dodgerblue;
		}
	</style>

</html>